<template>
  <div>
    <div class="expend-btn-box flex">
      <el-button type="primary" size="mini" @click="addItem">添加类型</el-button>
    </div>
    <div class="flex">
      <div class="left-box">
        <div v-for="item in list" :key="item.primaryKey" class="flex justify-between">
          <span class="font-size-16">{{ item.chargeItemName }}</span>
          <div>
            <el-button type="text" class="color-409EFF" @click="editItem(item)">编辑</el-button>
            <el-button type="text" class="color-red" @click="deleteItem(item)">删除</el-button>
          </div>
        </div>
      </div>
      <div class="right-box" v-if="isShowForm">
        <el-form ref="form" :model="formModel" label-width="130px" size="small" label-position="right">
          <el-row>
            <el-col :span="17">
              <el-form-item label="排序" prop="sortNo" :rules="[{ required: true, message: '请输入排序', trigger: 'blur' }]">
                <el-input-number :controls="false" v-model="formModel.sortNo"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="17" v-if="type == 1">
              <el-form-item label="事项类型" prop="bizType" :rules="[{ required: true, message: '请选择事项类型', trigger: 'change' }]">
                <el-select v-model="formModel.bizType" placeholder="请选择">
                  <el-option v-for="item in bizTypeList" :key="item.key" :value="item.key" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item :label="type == 2 ? '事项类型名称' : '分组名称'" prop="chargeItemName" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
                <el-input maxlength="200" v-model="formModel.chargeItemName" placeholder="请输入事项类型名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item :label="type == 2 ? '事项类型编码' : '分组编码'">
                <el-input maxlength="200" v-model="formModel.chargeItemCode" placeholder="请输入事项类型编码" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="17" v-if="type == 2">
              <el-form-item label="分组" prop="groupKey" :rules="[{ required: true, message: '请选择分组', trigger: 'blur' }]">
                <el-select v-model="formModel.groupKey" placeholder="请选择" @change="setBiztype">
                  <el-option v-for="item in groupList" :key="item.primaryKey" :value="item.primaryKey" :label="item.chargeItemName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item label="事项类型">
                <el-select v-model="formModel.chargeType" placeholder="请选择">
                  <el-option v-for="item in chargeChildChargeTypeList" :key="item.key" :value="item.key" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item label="预测值颜色" prop="planColor" :rules="{ required: true, message: '请选择预测值颜色', trigger: 'blur' }">
                <el-color-picker v-model="formModel.planColor"></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item label="执行值颜色" prop="executeColor" :rules="{ required: true, message: '请选择执行值颜色', trigger: 'blur' }">
                <el-color-picker v-model="formModel.executeColor"></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item label="">
                <el-button class="f-right" type="primary" size="mini" @click="save">保 存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import { requestTips, askDialog, formValid } from '@/common/js/utils';
  import { apiConstant } from '@/api';
  import { apiMatterChildAdd, apiMatterChildDelete, apiMatterChildUpdate, apiMatterChildList } from '../../../api/index';
  export default {
    props: {
      // 1 分组 2 子项
      type: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        list: [],
        bizTypeList: [],
        chargeChildChargeTypeList: [],
        groupList: [],
        formModel: { sortNo: '', chargeItemName: '',bizTypeList: '', chargeItemCode: '', planColor: '', executeColor: '', groupKey: '', chargeType: '' },
        isShowForm: false,
        enterpriseId: localStorage.getItem('userEnterpriseid'),
      };
    },

    methods: {
      async getTree() {
        this.getConstant();
        if (this.type == 2) this.getGroupList();
        let res = await apiMatterChildList({ enterpriseid: this.$route.query.key, childType: this.type });
        this.list = res.rows || [];
      },

      // 分组
      async getGroupList() {
        let res = await apiMatterChildList({ enterpriseid: this.$route.query.key, childType: 1 });
        this.groupList = res.rows || [];
      },

      //事项类型
      async getConstant() {
        let res = await apiConstant({});
        this.bizTypeList = res.chargeItemBizType || [];
        this.chargeChildChargeTypeList = res.chargeChildChargeType || [];
      },

      //事项子类型选择时
      setBiztype() {
        let obj = this.groupList.find(item => item.primaryKey == this.formModel.groupKey);
        this.formModel.bizType = obj.bizType;
      },

      addItem() {
        this.formModel.primaryKey = '';
        this.formModel.chargeItemName = '';
        this.formModel.chargeItemCode = '';
        this.formModel.chargeType = '';
        this.isShowForm = true;
      },

      editItem(item) {
        this.formModel = item;
        this.isShowForm = true;
      },

      deleteItem(item) {
        askDialog('确认删除？', async () => {
          let res = await apiMatterChildDelete({ primaryKey: item.primaryKey });
          requestTips(res, () => {
            this.getTree();
          });
        });
      },

      save() {
        formValid(this, 'form', this.saveFn);
      },

      async saveFn() {
        this.formModel.enterpriseid = this.$route.query.key;
        this.formModel.childType = this.type; // 1 分组 2 子项
        let res = this.formModel.primaryKey ? await apiMatterChildUpdate(this.formModel) : await apiMatterChildAdd(this.formModel);
        requestTips(res, () => {
          this.getTree();
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .left-box,
  .right-box {
    width: 50%;
  }
  .left-box {
    padding: 0px 170px 0 20px;
  }
  ::v-deep {
    .el-button {
      font-size: 16px;
    }
  }
  .expend-btn-box {
    position: absolute;
    right: 0;
    top: -50px;
    z-index: 100;
  }
</style>
